<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/blog_detail.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="../editor.md/css/editormd.min.css" />
    <script src="../editor.md/lib/marked.min.js"></script>
    <script src="../editor.md/lib/prettify.min.js"></script>
    <script src="../editor.md/editormd.js"></script>
    <style>
        /* 使按钮更加美观 */
        #editBtn {
            background-color: #4CAF50;  /* 绿色背景 */
            color: white;  /* 白色字体 */
            padding: 10px 20px;  /* 内边距 */
            border: none;  /* 无边框 */
            border-radius: 5px;  /* 圆角 */
            font-size: 16px;  /* 字体大小 */
            cursor: pointer;  /* 鼠标指针 */
            transition: background-color 0.3s ease;  /* 背景色渐变效果 */
        }

        #editBtn:hover {
            background-color: #45a049;  /* 鼠标悬浮时背景色变化 */
        }

        #editBtn:active {
            background-color: #388e3c;  /* 按钮按下时的背景色 */
        }

        #editBtn:focus {
            outline: none;  /* 去除焦点时的外轮廓 */
        }

        /* 为按钮添加适当的间距 */
        .container-right {
            margin-top: 20px;
        }
    </style>
</head>

<body>
<div class="nav">
    <img src="../image/logo2.jpg" alt="">
    <div class="title">我的博客系统</div>
    <div class="spacer"></div>
    <a href="../blog_list.jsp">主页</a>
    <a href="../blog_edit.jsp">写博客</a>
    <a href="/blog/logout">注销</a>
</div>

<div class="container">
    <div class="container-left">
        <div class="card">
            <img src="../image/kun.jpg" alt="">
            <h3><%= request.getAttribute("username") != null ? request.getAttribute("username") : "" %></h3>
            <a href="https://www.github.com">github 地址</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div>
        </div>
    </div>

    <div class="container-right">
        <h3><%= request.getAttribute("title") != null ? request.getAttribute("title") : "加载中..." %></h3>
        <div class="date"><%= request.getAttribute("postTime") != null ? request.getAttribute("postTime") : "" %></div>
        <div class="content" id="content">
            <%= request.getAttribute("content") != null ? request.getAttribute("content") : "" %>
        </div>
        <!-- 更改按钮 -->
        <div style="text-align: center;">
            <button id="editBtn" style="background: black;">更改文章</button>
        </div>
    </div>
</div>

<script src="../js/app.js"></script>
<script>
    function getBlog() {
        $.ajax({
            type: 'get',
            url: '/blog/blog' + location.search,   // 这里需要带上 blogId 参数
            success: function(blog) {
                let h3 = document.querySelector('.container-right h3');
                h3.innerHTML = blog.title;
                let dateDiv = document.querySelector('.container-right .date');
                dateDiv.innerHTML = blog.postTime;
                editormd.markdownToHTML('content', { markdown: blog.content });
            }
        });
    }

    function getLoginStatus() {
        // TODO: 验证登录状态
    }

    function getAuthorInfo() {
        $.ajax({
            type: 'get',
            url: '/blog/getAuthorInfo' + location.search,
            success: function(user) {
                let h3 = document.querySelector('.card h3');
                h3.innerHTML = user.username;
            }
        });
    }

    // 点击更改文章按钮，跳转到编辑页面
    document.getElementById('editBtn').onclick = function() {
        var blogId = new URLSearchParams(location.search).get('blogId');
        window.location.href = '/blog/blog_edit2.jsp?blogId=' + blogId;
    }

    getBlog();
    getLoginStatus();
    getAuthorInfo();
</script>
</body>

</html>
